<template>
  <div class="test">
    <!-- 按钮 -->
    <div class="btns">
      <el-button size="small" type="primary" @click="toAdd">添加</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" size="small">
      <el-table-column type="index" label="ID"> </el-table-column>
      <el-table-column prop="key" label="型号" width="180"> </el-table-column>
      <el-table-column prop="val" label="价值"> </el-table-column>
      <el-table-column  label="操作" width ="150" align="center">
        <template v-slot="scope">
            <el-button size="small" type="reference" @click="del(scope.row)">删除</el-button>
            <el-button size="small" type="primary" @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <el-dialog
      class="customer_model"
      title="添加配置"
      :visible.sync="dialogVisible"
      width="50%">
      {{form}}
          <el-form :model="form" label-width="100px">
           <el-form-item label="型号" >
             <el-input v-model="form.key" ></el-input>
           </el-form-item>
           <el-form-item label="价值" >
             <el-input v-model="form.val"></el-input>
           </el-form-item>
    </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {get,post} from '@/utils/request'
export default {
  data (){
    return {
      form:{},
      list:[],
      dialogVisible:false
    }
  },
  created(){
    this.loadData();
  },
  methods:{

      save(){
          let url = "/cms_config/saveOrUpdate"
          get(url,this.form).then( (response)=>{
              this.dialogVisible = false;
              this.$message({type:"success",message:response.message})
              this.loadData();
          })
      },
      del(row){
         let url = "/cms_config/deleteById"
         post(url,{id:row.id}).then( (response)=>{
             this.$message({type:"success",message:response.message})
             this.loadData();
         })
      },
      edit(row){
          this.form = row;
          this.dialogVisible = true;
      },
      loadData(){
        let url = "/cms_config/findAll";
        get(url).then( (response)=>{
            this.list = response.data;
        } );
      },
    toAdd(){
      this.dialogVisible = true;
    }
  }
}
</script>